import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Table,
  Radio,
} from 'antd';
import GeneralTableComponent from 'components/GeneralTableComponent';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Option } = Select;
const RangePicker = DatePicker.RangePicker;

@connect(({ creditCheck, loading }) => ({
  creditCheck,
  loading: loading.models.creditCheck,
}))
@Form.create()
export default class CreditCheck extends PureComponent {
  state = {
    listParam:{
      pageNo: 1,
      pageSize: 10,
      name: '',
      mobile: '',
      startTime: '',
      endTime: '',
      members: '',
      orderNo: '',
      limitType: '',
      source: '',
      state: 'risk_waiting',
    },
  };

  componentDidMount() {
    this.getTableData();
  }

  getTableData = () => {
    const { dispatch } = this.props;
    const { listParam } = this.state;
    let postParam = {};
    for (let [key, val] of Object.entries(listParam)) {
      if (val) {
        postParam[key] = val;
      }
    }
    dispatch({
      type: 'creditCheck/fetchGetUserCenterRiskList',
      payload: {
        ...postParam
      }
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { listParam } = this.state;
    listParam.pageNo = pagination.current;
    this.getTableData();
  };

  handleFormReset = () => {
    const { form } = this.props;
    const { listParam } = this.state;
    form.resetFields();
    [
      listParam.name, 
      listParam.mobile, 
      listParam.startTime, 
      listParam.endTime, 
      listParam.members, 
      listParam.orderNo, 
      listParam.limitType, 
      listParam.source
    ] = ['', '', '', '', '', '', '', ''];
    listParam.pageNo = 1;
    this.getTableData();
  };

  handleSearch = (e) => {
    const { dispatch, form } = this.props;
    const { listParam } = this.state;
    e.preventDefault();
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      listParam.pageNo = 1;
      listParam.limitType = fieldsValue.limitType ? ( fieldsValue.limitType === "all" ? '' : fieldsValue.limitType ) : '';
      listParam.source = fieldsValue.source ? ( fieldsValue.source === "all" ? '' : fieldsValue.source ) : '';
      listParam.mobile = fieldsValue.mobile ? fieldsValue.mobile : '';
      listParam.name = fieldsValue.name ? fieldsValue.name : '';
      listParam.orderNo = fieldsValue.orderNo ? fieldsValue.orderNo : '';
      [listParam.startTime, listParam.endTime] = fieldsValue.time && fieldsValue.time[0] ? [fieldsValue.time[0].format('YYYY-MM-DD HH:mm:ss'), fieldsValue.time[1].format('YYYY-MM-DD HH:mm:ss')] : '';
      this.getTableData();
    });
  };

  handleRadioChange = (e) => {
    const { listParam } = this.state;
    listParam.state = e.target.value;
    listParam.pageNo = 1;
    this.getTableData();
  };

  renderSimpleForm() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Card bordered={false} style={{marginBottom: 10}}>
        <Form onSubmit={this.handleSearch} layout="inline">
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col lg={6} md={6} sm={12}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>姓名</span>}>
                {getFieldDecorator('name')(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={6} sm={24}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>手机号</span>}>
                {getFieldDecorator('mobile')(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col lg={12} md={12} sm={24}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>起止时间</span>}>
                {getFieldDecorator('time')(
                  <RangePicker
                    ranges={{
                      近7天: [moment().subtract(7, 'days'), moment()],
                      近14天: [moment().subtract(14, 'days'), moment()],
                      近30天: [moment().subtract(30, 'days'), moment()],
                    }}
                  />
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={6} sm={24}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>订单号</span>}>
                {getFieldDecorator('orderNo')(
                  <Input />
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={6} sm={24}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>额度类型</span>}>
                {getFieldDecorator('limitType')(
                  <Select style={{ width: 120 }} placeholder="全部">
                    <Option value="all">全部</Option>
                    <Option value="shop">购物额度</Option>
                    <Option value="loan">提现额度</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={6} sm={24}>
              <FormItem label={<span style={{width: 56, display: 'inline-block'}}>产品来源</span>}>
                {getFieldDecorator('source')(
                  <Select style={{ width: 120 }} placeholder="全部">
                    <Option value="all">全部</Option>
                    <Option value="up">sdfz</Option>
                    {/* <Option value="xbeauty">想美</Option>
                    <Option value="xflower">信花花</Option> */}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col lg={6} md={6} sm={24}>
              <span>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button  htmlType="submit" style={{marginLeft:12}} onClick={this.handleFormReset}>
                  清除
                </Button>
              </span>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }

  render() {
    const { creditCheck: { creditCheckData }, loading } = this.props;
    const { listParam } = this.state;

    let tableColumns = [];
    switch(listParam.state) {
      case 'risk_waiting':
        tableColumns = [{
          title: '序号',
          dataIndex: '',
          key: '',
          render: (text, record, index) => {
            return <span>{index + 1 + ( creditCheckData.pagination.current - 1 ) * creditCheckData.pagination.size}</span>
          }
        }, {
          title: '用户id',
          dataIndex: 'userId',
          key: 'userId',
          render: val => `${val}`
        }, {
          title: '产品来源',
          dataIndex: 'source',
          key: 'source',
          render: val => `${val}`
        }, {
          title: '订单号',
          dataIndex: 'orderNo',
          key: 'orderNo',
          render: val => `${val}`
        }, {
          title: '姓名&性别',
          dataIndex: 'name',
          key: 'name',
          render: (text, record, index) => {
            return <span>{ record.name + ' ' + ( record.gender === "男" ? '♂' : ( record.gender === "女" ? '♀' : '' ) ) }</span>
          }
        }, {
          title: '提交时间',
          dataIndex: 'submitTime',
          key: 'submitTime',
          render: val => `${val}`
        }, {
          title: '是否会员',
          dataIndex: 'members',
          key: 'members',
          render: (text, record, index) => {
            return <span>{ record.members ? '是' : '否' }</span>
          }
        }, {
          title: '提交第次',
          dataIndex: 'submitCount',
          key: 'submitCount',
          render: (text, record, index) => {
            return <span>{'第' + record.submitCount + '次'}</span>
          }
        }];
        break;
      case 'risk':
        tableColumns = [{
          title: '序号',
          dataIndex: '',
          key: '',
          render: (text, record, index) => {
            return <span>{index + 1 + ( creditCheckData.pagination.current - 1 ) * creditCheckData.pagination.size}</span>
          }
        }, {
          title: '用户id',
          dataIndex: 'userId',
          key: 'userId',
          render: val => `${val}`
        }, {
          title: '订单号',
          dataIndex: 'orderNo',
          key: 'orderNo',
          render: val => `${val}`
        }, {
          title: '产品类型',
          dataIndex: 'source',
          key: 'source',
          render: val => `${val}`
        }, {
          title: '姓名&性别',
          dataIndex: 'name',
          key: 'name',
          render: (text, record, index) => {
            return <span>{ record.name + ' ' + ( record.gender === "男" ? '♂' : ( record.gender === "女" ? '♀' : '' ) ) }</span>
          }
        }, {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
          render: val => `${val}`
        }, {
          title: '申请时间',
          dataIndex: 'applyTime',
          key: 'applyTime',
          render: val => `${val}`
        }, {
          title: '通过时间',
          dataIndex: 'passTime',
          key: 'passTime',
          render: val => `${val}`
        }, {
          title: '是否会员',
          dataIndex: 'members',
          key: 'members',
          render: (text, record, index) => {
            return <span>{ record.members ? '是' : '否' }</span>
          }
        }, {
          title: '购物额度',
          dataIndex: 'shopAmountLimit',
          key: 'shopAmountLimit',
          render: val => `${val}`
        }, {
          title: '提现额度',
          dataIndex: 'loanAmountLimit',
          key: 'loanAmountLimit',
          render: val => `${val}`
        }, {
          title: '风控分数',
          dataIndex: 'riskScore',
          key: 'riskScore',
          render: val => `${val}`
        }];
        break;
      case 'risk_fail':
        tableColumns = [{
          title: '序号',
          dataIndex: '',
          key: '',
          render: (text, record, index) => {
            return <span>{index + 1 + ( creditCheckData.pagination.current - 1 ) * creditCheckData.pagination.size}</span>
          }
        }, {
          title: '用户id',
          dataIndex: 'userId',
          key: 'userId',
          render: val => `${val}`
        }, {
          title: '订单号',
          dataIndex: 'orderNo',
          key: 'orderNo',
          render: val => `${val}`
        }, {
          title: '产品类型',
          dataIndex: 'source',
          key: 'source',
          render: val => `${val}`
        }, {
          title: '姓名&性别',
          dataIndex: 'name',
          key: 'name',
          render: (text, record, index) => {
            return <span>{ record.name + ' ' + ( record.gender === "男" ? '♂' : ( record.gender === "女" ? '♀' : '' ) ) }</span>
          }
        }, {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
          render: val => `${val}`
        }, {
          title: '申请时间',
          dataIndex: 'applyTime',
          key: 'applyTime',
          render: val => `${val}`
        }, {
          title: '拒绝时间',
          dataIndex: 'refuseTime',
          key: 'refuseTime',
          render: val => `${val}`
        }, {
          title: '申请次数',
          dataIndex: 'submitCount',
          key: 'submitCount',
          render: val => `${val}`
        }, {
          title: '是否会员',
          dataIndex: 'members',
          key: 'members',
          render: (text, record, index) => {
            return <span>{ record.members ? '是' : '否' }</span>
          }
        }, {
          title: '风控分数',
          dataIndex: 'riskScore',
          key: 'riskScore',
          render: val => `${val}`
        }];
        break;
      default:
        break;
    }

    return (
      <PageHeaderLayout title="信用审批">
        <Card bordered={false}>
          <div>{this.renderSimpleForm()}</div>

          <div style={{marginBottom: 20}}>
            <Radio.Group defaultValue="risk_waiting" buttonStyle="solid" onChange={this.handleRadioChange}>
              <Radio.Button value="risk_waiting">待审核订单</Radio.Button>
              <Radio.Button value="risk">已通过订单</Radio.Button>
              <Radio.Button value="risk_fail">已拒绝订单</Radio.Button>
            </Radio.Group>
          </div>

          <GeneralTableComponent
            loading={loading}
            data={creditCheckData}
            columns={tableColumns}
            onChange={this.handleStandardTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
